<template>
  <div style="width: 100%;height: 100%">
    <el-table
      ref="multipleTable"
      :data="tableData"
      @select="selectColumn"
      height="90%"
      border
      style="width: 100%">
      <el-table-column
        type="selection"
        align="center"
        width="55">
      </el-table-column>
      <el-table-column
        prop="columnName"
        label="列表字段"
        align="center"
        >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "RightTableColumn",
  data(){
    return {
      tableData:[]
    }
  },
  props:{
    originalTableData:{
      type:Array,
      default(){
        return []
      }
    }
  },
  methods:{
    selectColumn(selection,row){
      const obj = {
        ...row
      }
      const ind = selection.findIndex(item => item.columnName == obj.columnName)
      if(ind != -1){
        obj.showColumn = true
        this.$emit('throwSelectRightTable',obj)
      }
      else{
        obj.showColumn = false
        this.$emit('throwSelectRightTable',obj)
      }
    }
  },
  watch:{
    originalTableData:{
      handler(val){
        this.tableData = val
        this.tableData.forEach(item => {
          if(item.showColumn) this.$nextTick(() => this.$refs.multipleTable.toggleRowSelection(item,true))
          else this.$nextTick(() => this.$refs.multipleTable.toggleRowSelection(item,false))
        })
      },
      immediate:true
    }
  }
}
</script>

<style scoped>

</style>
